<template>
    <div class="search">
        <div class="search-box-wrapper">
            <search-box
                    :keyword="keyword"
                    ref='searchBox'
                    @setKeyword='setKeyword'
            ></search-box>
        </div>
        <div class="bottom" ref="bottom">
            <scroll
                    v-if="!keyword"
                    :datalength="hotArr.length + searchHistory.length"
                    ref="scroll"
            >
                <div>
                    <div class="hot-key">
                        <h1 class='title'>热门搜索</h1>
                        <ul>
                            <li @click='setKeyword(text)' v-for='text in hotArr' class='item'>
                                <span v-text='text'></span>
                            </li>
                        </ul>
                    </div>
                    <div class="search-history" v-show="searchHistory.length">
                        <div class="title">
                            <span class="text">搜索历史</span>
                            <span class="icon" @click="showConfirm"><i class="icon-clear"></i></span>
                        </div>
                        <list-history :list="searchHistory" @selectItem="setKeyword" @deleteItem="deleteItem">
                        </list-history>
                    </div>
                </div>
            </scroll>
            <div class="search-result" v-show='keyword !== ""'>
                <search-list :query='keyword' @scrollWillStart='blur' ref="searchScroll"></search-list>
            </div>
        </div>
        <confirm text="是否清空所有搜索记录" ref="confirm" @confirm="deleteItem"></confirm>
        <!--歌手页面-->
        <router-view></router-view>
    </div>
</template>
<script>
    import { playlistMixin, searchMixin } from '@/common/js/mixin';
    import { mapGetters } from 'vuex';
    import { getHotKey } from '@/api/search';
    import listHistory from '@/base/list-history';
    import searchBox from '@/base/search-box';
    import scroll from '@/base/scroll';
    import confirm from '@/base/confirm';
    import { deleteSearchItem } from '@/common/js/cache';
    import searchList from '../search-list/search-list';

    const PLAYER_HEIGHT = 60;
    export default {
        mixins: [playlistMixin, searchMixin],
        name: 'search',
        data() {
            return {
                hotArr: [],
                keyword: '',
            };
        },
        computed: {
            ...mapGetters(['searchHistory']),
        },
        methods: {
            handlePlayList(list) {
                this.$refs.bottom.style.bottom = list.length ? `${PLAYER_HEIGHT}px` : 0;
                this.$refs.scroll && this.$refs.scroll.refresh();
                this.$refs.searchScroll && this.$refs.searchScroll.refresh();
            },
            deleteItem(text) {
                // 删除vuex中的state和ls
                this.SET_SEARCH_HISTORY(deleteSearchItem(text));
            },
            showConfirm() {
                this.$refs.confirm.show();
            },
            _getHotKey() {
                getHotKey().then((res) => {
                    res.hotkey.slice(0, 15).forEach((item) => {
                        this.hotArr.push(item.k);
                    });
                });
            },
        },
        created() {
            this._getHotKey();
        },
        components: {
            searchBox,
            searchList,
            listHistory,
            scroll,
            confirm,
        },
    };
</script>
<style lang='stylus' scoped>
    @import '~styl/var'
    .search
        .search-box-wrapper
            padding 20px
            padding-bottom 30px
        .bottom
            position fixed
            top 178px
            left 0
            width 100%
            bottom 0
            background $color-background
            overflow hidden
            .hot-key
                margin 0 20px 20px 20px
                font-size 0
                .title
                    margin-bottom: 20px
                    font-size: $font-size-medium
                    color: $color-text-l
                .item
                    display inline-block
                    padding: 5px 10px
                    margin: 0 20px 10px 0
                    border-radius: 6px
                    background: $color-highlight-background
                    font-size: $font-size-medium
                    color: $color-text-d
            .search-history
                margin 0 20px
                .title
                    display flex
                    height 40px
                    justify-content space-between
                    align-items center
                    font-size $font-size-medium
                    color $color-text-d
            .search-result
                height 100%
                box-sizing border-box
                overflow hidden
                padding 0 30px
</style>
